<template>
  <el-card class="box-card card-header m-t-20">
    <div slot="header" class="clearfix f-medium">
      <i class="fa fa-history m-r-10 text-c-blue" aria-hidden="true"></i>
      <span>检测记录</span>
    </div>
    <SensorState />
    <el-row :gutter="20">
      <el-col :span="24" class="m-b-15">
        <span class="demonstration">周数选择</span>
        <el-date-picker v-model="selectDate" align="right" type="week" placeholder="选择日期" format="yyyy 第 WW 周"
          :clearable="false" size="small" @change="pickerHander">
        </el-date-picker>
      </el-col>
      <el-col :span="9">
        <DataCharts />
      </el-col>
      <el-col :span="15">
        <TableCreator :colsConfig="colsConfig" :data="dateCountTable" stripe border :height="320">
          <template #date="{ row }">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ row.time }}</span>
          </template>
          <template #operation="{ row }">
            <el-button size="mini" type="primary" plain round @click="handlerShow(row)">显示数据</el-button>
          </template>
        </TableCreator>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import SensorState from "./SensorState.vue";
import DataCharts from "./DataCharts.vue";
import { mapState } from "vuex";
import formatDate from "@/utils/formatData";
import { getOneDayData } from "@/api/waterAnalysis";
import { colsConfig } from '../config/record-options';
export default {
  name: "RecordTable",
  components: { DataCharts, SensorState },
  data() {
    return {
      colsConfig,
      // 选中的日期值
      selectDate: "",
    };
  },
  mounted() {
    // 把当前的时间给日期选择器赋初值
    this.selectDate = new Date().getTime();
  },
  computed: {
    ...mapState("waterAnalysis", ["dateCountTable"]),
  },
  methods: {
    // 选中日期之后发送请求
    pickerHander(e) {
      // 获取date对象，日期为该周的星期一，转化为时间戳selectDate
      let day = formatDate(e.getTime() - 24 * 60 * 60 * 1000, "yyyy-mm-dd");
      this.$store.dispatch("waterAnalysis/toGetNext7DaysData", day);
    },
    //显示选中的日期内包含的日期
    handlerShow(row) {
      let data = { time: row.time };
      // 发送请求，获取当天的所有数据
      getOneDayData(row.time)
        .then((res) => {
          data.data = res;
          this.$bus.$emit("closeSocket", data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style  scoped lang="less">
.demonstration {
  margin: 0px 20px;
}
</style>